import React, { Component } from 'react';
import imgURL from './img/cloth.png';
import './main.css';
import 'antd/dist/antd.css';
import { Switch,Radio } from 'antd';
// const RadioGroup = Radio.Group;
// const imgURL = require('./cloth.png');

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            num: 1,
            price: 339, // 单价
            totelPrice: 339, //总价
            // postage: 12, //邮费
            isAddOn:false, //
            value: 1,
            coupons: true,
            style: {transform: "translateY(100%)"},
            preferentialName: '满39免邮>',
            preferential: [
                { name: '满39免邮>', postage:0},
                { name: '不使用优惠', postage: 12}
            ],
            value: {
                name: '1',
                size: 10,

            }
        };

        // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
        // this.addClick = this.addClick.bind(this);
        // this.subClick = this.subClick.bind(this);
        // this.onChange = this.onChange.bind(this);
        // this.showToast = this.showToast.bind(this);
        // this.toggleCoupons = this.toggleCoupons.bind(this);
    }

    onChange = (checked) => {
        // console.log(`switch to ${checked}`);
        if(checked) {
            this.setState({
                totelPrice: this.state.totelPrice - 10
            })
        } else {
            this.setState({
                totelPrice: this.state.totelPrice + 10
            })
        }
    }
    addClick =() =>{  //累加
        this.setState(prevState => {
            console.log("num====",prevState.num)
            return {
                num: prevState.num +1,
                totelPrice: this.state.totelPrice += this.state.price
            }
        })
    }
    subClick =()=> {  //减去
        let _num = this.state.num;
        // Helper.modal('组件', 'z-index层级');
        if(_num >= 1) {
            this.setState({
                num: _num -1,
                totelPrice: this.state.totelPrice-=this.state.price
            })
        }
    }
    showToast=()=> {
        this.setState({ style: { transform: "translateY(0)" } })
    }
    hideToast=() => {
        this.setState({ style: { transform: "translateY(100%)" } })
    }
    toggleCoupons=()=> {
        this.setState({
            coupons :!this.state.coupons
        })
        if(this.state.coupons) {
            this.setState({
                totelPrice: this.state.totelPrice+this.state.postage
            })
        } else {
            this.setState({
                totelPrice: this.state.totelPrice-this.state.postage
            })
        }
    }
    render() {
        // if(this.state.preferential && this.state.preferential.length) {
        //     const preferentialName = this.state.preferential.map((item, index) => {
        //         <div key={index} style={{ backgroundImage: `url(${item.mediaUrl})` }} className='bg-cover teacher-medias' />
        //     })
        // }
        return (
            <div className="App">
                <div className="goods">
                    <div className="goodsLeft">
                        <img src={imgURL} alt=""/>
                    </div>
                    <div className="goodsRight">
                        <div className="msg msg1">
                            <text>veromoda限量款小香风衣</text>
                            <text>￥339.00</text>
                        </div>
                        <div className="msg msg2">
                            <text>白色</text>
                            <text>x{this.state.num}</text>
                        </div>
                        <div className="msg msg3">
                            <text>七天退换</text>
                        </div>
                    </div>
                </div>
                <div className="line">
                    <div className="left">店铺优惠</div>
                    <div className="right" onClick={this.showToast}> {this.state.preferentialName} </div>
                </div>
                <div className="line">
                    <div className="left">商品数量</div>
                    <div className="right">
                        <span onClick={this.subClick}>-</span>
                        <span style={{width: '25px'}}>{this.state.num}</span>
                        <span onClick={this.addClick}>+</span>
                    </div>
                </div>
                <div className="line">
                    <div className="left">可用优惠券10元</div>
                    <Switch onChange={this.onChange} />
                </div>
                <div className="line">
                    <div className="left">商品总价</div>
                    <div className="right"><text>{this.state.totelPrice}</text>元</div>
                </div>
                <div className="toastBg" style={this.state.style} onClick={this.hideToast}></div>
                <div className="toast" style={this.state.style}>
                    <div className="line">
                        <div className="left">店铺优惠</div>
                    </div>
                    <div style={{ display: 'flex' }}>{this.state.preferentialName}</div>
                    <div className="line" >
                        <div className="left">{this.state.preferential}满39包邮</div>
                        {/*<Switch onChange={this.onChange} />*/}
                            <Radio checked={this.state.coupons} onClick={this.toggleCoupons}></Radio>
                        {/*</RadioGroup>*/}
                    </div>
                    <div className="line">
                        <div className="left">不使用优惠</div>
                        <Radio checked={!this.state.coupons} onClick={this.toggleCoupons}></Radio>
                    </div>
                </div>
            </div>

        );
    }
}

export default App;
